Figma
Figma란?
- 피그마는 UIUX 디자인을 위한 협업 웹 어플리케이션. 웹을 기반으로 디자인 편집 작업 및 웹 링크 공유를 통해 협업하는 디자인 툴.
Figma의 장점
- 웹 환경에서 작동
- 인터넷 연결 환경에서 실시간으로 저장
- 링크만 있으면 어디서든 편집, 공유 가능
- 플러그인, 커뮤니티 등 많은 유용한 기능을 제공
- 대부분의 모든 기능이 무료로 제공
디자이너 → 개발자 핸드오프
- 디자인 원본 파일
psd, ai등 - 추출한 에셋 파일 모음
jpg, png등 - 색상, 폰트, 프로토타입 등의 정보가 담긴 파일
doc, ppt, pdf등
개발자가 피그마를 배워야 하는 이유
- 편리한 협업
- 디자인 요소를 쉽게 이해
- 코드 작성 효율이 올라감
- 직접 디자인 작업이 가능
벡터와 비트맵
- 벡터(Vector): 점과 점을 연결하여 수학적 원리로 그려지는 방식
- 비트맵(Bitmap): 서로 다른 점(픽셀)들의 조합으로 그려진 이미지
| 벡터(Vector) | 비트맵(Bitmap) | |
|---|---|---|
| 장점 | 해상도(확대,축소)에 영향을 끼치지 않음. | 정교하고 다양한 색상을 가진 이미지 생성 |
| 단점 | 정교한 이미지, 그래픽 표현에는 적합하지 않음 | 이미지가 깨질 수 있음, 대형 출력물 제작 시 용량이 커질 수 있음 |
| 형식/확장자 | AI, EPS, SVG | JPG, PNG, BMP, GIF |
| 적합한 사용 용도 | 로고, 아이콘, 일러스트 등 | 사진, 이미지, 그래픽 등 |
피그마 단축키
| 설명 | 단축키 |
|---|---|
| UI 숨기기/보기 | Ctrl + \ |
| 선택 도구 | V |
| 프레임 도구 | F |
| 펜 도구 | P |
| 텍스트 도구 | T |
| 손바닥 도구(캔버스 이동) | H, 스페이스바 + 마우스 드래그 |
| Comment 남기기 | C |
| 여러 요소 선택 | Shift + 클릭 |
| 색상 스포이드 | I |
| 그룹/프레임 내 요소 선택 | Ctrl + 클릭 |
| 전체 선택 | Ctrl + A |
| 그룹 만들기 | Ctrl + G |
| 그룹 해제 | Shift + Ctrl + G |
| 프레임으로 만들기 | Alt + Ctrl + G |
| 개체를 가로로 대칭 | Cmd + Shift + H |
| 개체를 세로로 대칭 | Cmd + Shift + V |
| 요소 복사/붙여넣기 | Alt + 드래그, Ctrl + C → Ctrl + V |
| 개체간 간격 확인 | Alt + 마우스 호버 |
| 중간을 기준으로 크기 바꾸기 | Alt + 크기 변경 |
| 비율에 맞게 크기 바꾸기 | Shift + 크기 변경 |
| 캔버스 확대/축소 | +/-, Ctrl + 마우스 스크롤 |
| 레이어 뒤로/앞으로 보내기 | Ctrl + [ / Ctrl + ] |
| 맨 뒤로/맨 앞으로 보내기 | [ , ] |
| 중복 커서 기능 제거 | Alt + Ctrl + \ |